<template>
  <div class="function_drawer">
    <div class="function_box">
      <div class="function_conetnt">
        <div v-if="isShowlist" class="no_data">暂无数据</div>
        <div class="list" ref="pointBoxInput" v-else>
          <div>
            <div class="item" v-for="(item, index) in list" :key="index">
              <div :ref="item.val" class="title" v-if="item.list.length !== 0">
                {{ item.name }}
              </div>
              <div class="radio_box">
                <div v-if="item.list.length !== 0" class="list_value">
                  <div
                    @click="changeRadio(rad)"
                    v-for="(rad, i) in item.list"
                    :key="i"
                  >
                    {{ rad[valueType] }}
                  </div>
                </div>
                <div v-else>
                  <el-radio
                    @change="changeRadio(rad)"
                    v-for="(rad, i) in item.list"
                    class="radio_item"
                    v-model="radio"
                    :label="rad[valueType]"
                    :key="i"
                    >{{ rad[valueType] }}</el-radio
                  >
                </div>
              </div>
            </div>
          </div>
          <SpotPoint
            position="static"
            v-if="!isShowlist"
            left="25px"
            :list="list"
            pointBoxId="pointBoxInput"
            @handPoint="handPoint"
          ></SpotPoint>
        </div>
      </div>
      <div style="text-align: center">
        <svg-icon
          @click="handOpenApp"
          style="width: 20px; height: 20px; cursor: pointer"
          icon-class="zhankai"
        ></svg-icon>
      </div>
    </div>
    <FunctionDrawer
      :title="title"
      @handClose="handClose"
      @submit="submit"
      ref="functionDrawerRef"
      :objKey="objKey"
    ></FunctionDrawer>
  </div>
</template>

<script>
import SpotPoint from "@/components/SpotPoint";
import FunctionDrawer from "./index.vue";
export default {
  components: {
    SpotPoint,
    FunctionDrawer,
  },

  props: {
    title: {
      type: String,
      default: "",
    },
    valueType: {
      type: String,
      default: "valueType",
    },
    title: {
      type: String,
      default: "",
    },
    isRadio: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    // 数组的key -这里有四种类型
    objKey: {
      type: String,
      default: "funArr",
    },
  },
  data() {
    return {
      radio: "",
      isAnimation: false,
    };
  },
  computed: {
    isShowlist() {
      return this.list.every((item) => item.list.length == 0);
    },
  },
  methods: {
    handClose(row) {
      this.$refs.functionDrawerRef.show = false;
      this.$emit("handClose", row);
    },
    //函数弹框确认
    submit(row) {
      this.$emit("changeRadio", row);
      // this.$emit("submit", row);
    },
    // 打开函数列表抽屉
    handOpenApp() {
      this.$refs.functionDrawerRef.show = true;
      this.$emit("handOpenApp");
    },
    changeRadio(item) {
      this.$emit("changeRadio", item);
    },
    handPoint(index) {
      this.$nextTick(() => {
        this.active = index;
        const that = this;
        // 此处使用refs获取dom元素,原生的获取不到 原因不明
        const scrollBox = this.$refs["pointBoxInput"]; // 容器
        const id = this.list[index].val;
        // const curTag = document.querySelector("#" + id); // 节点tag
        const curTag = this.$refs[id][0]; // 节点tag
        if (!curTag) return;
        let distance = scrollBox.scrollTop;
        const offsetTop = curTag.offsetTop; // 滚动距离
        let step = offsetTop / 50;
        if (offsetTop > distance) {
          smoothDown();
        } else {
          const newTotal = distance - offsetTop;
          step = newTotal / 50;
          smoothUp();
        }
        scrollBox.scrollTop = offsetTop;
        function smoothDown() {
          if (distance < offsetTop && that.isAnimation == true) {
            distance += step;
            scrollBox.scrollTop = distance;
            setTimeout(smoothDown, 10);
          } else {
            scrollBox.scrollTop = offsetTop;
          }
        }
        function smoothUp() {
          if (distance > offsetTop && that.isAnimation == true) {
            distance -= step;
            scrollBox.scrollTop = distance;
            setTimeout(smoothUp, 10);
          } else {
            scrollBox.scrollTop = offsetTop;
          }
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.no_data {
  margin: 10px auto;
  width: 80%;
  text-align: center;
  /* margin-top: 50px; */
  color: #999;
}
.spot_point {
  top: 20px;
  /* position: relative; */
}
.title_arrow {
  display: flex;
  cursor: pointer;
  align-items: center;
}
.function_drawer {
  /* display: flex; */
}
.function_box {
  padding: 0 30px;
  /deep/ .el-radio,
  .el-radio__input {
    white-space: none;
  }
  /deep/ .el-radio__label {
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
    width: 220px;
    word-break: break-all;
    display: inline-block;
  }
  /* .function_conetnt {
    display: flex;
    width: 100%;
  } */
  .list {
    position: relative;
    overflow-y: auto;
    /* height: 75vh; */
    height: 200px;
    /* padding-bottom: 50px; */
    margin-top: 10px;
    display: flex;
    .item {
      .title {
        font-size: 20px;
        color: #333;
        margin: 10px 0;
      }
    }
    .radio_box {
      display: flex;
      .radio_item {
        margin: 10px 0;
        display: flex;
        /* align-items: center; */
        /deep/ .el-radio__label {
          word-wrap: break-word;
          white-space: inherit;
          overflow: inherit;
        }
      }
      .list_value {
        display: flex;
        flex-direction: column;

        div {
          cursor: pointer;
          padding: 6px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 220px;
          display: inline-block;
          &:hover {
            background-color: #f5f7fa;
          }
        }
      }
      /* .radio_item {
        margin: 10px 0;
      } */
      flex-direction: column;
    }
  }
}
</style>